<template>
    <div v-loading="loading">
        <h3 class="certificateTit">
            <span style="margin: 20px 10px;">营业执照审核</span>
            <span style="margin-left:20px;color:#ffa659;" v-show="businessInfo.accountStatus ==0">{{ businessInfo.accountStatus | statusFilter }}</span>
            <span style="margin-left:20px;color:#4acf1e;" v-show="businessInfo.accountStatus ==1">{{ businessInfo.accountStatus | statusFilter }}</span>
            <span style="margin-left:20px;color:#dc0101;" v-show="businessInfo.accountStatus ==2">{{ businessInfo.accountStatus | statusFilter }}</span>
            <el-button type="warning" style="margin-left:20px;padding: 5px 20px;" @click="examineEditPage = true" v-show="businessInfo.accountStatus ==2">
                重新提交审核
            </el-button>
        </h3>
        <div class="qualificationCertificate">
            <!-- <el-row :gutter="20"  style="line-height: 44px;font-size:18px;">
                <span style="margin: 20px 10px;">营业执照审核</span>
                <span style="margin-left:20px;color:#ffa659;" v-show="businessInfo.accountStatus ==0">{{ businessInfo.accountStatus | statusFilter }}</span>
                <span style="margin-left:20px;color:#4acf1e;" v-show="businessInfo.accountStatus ==1">{{ businessInfo.accountStatus | statusFilter }}</span>
                <span style="margin-left:20px;color:#dc0101;" v-show="businessInfo.accountStatus ==2">{{ businessInfo.accountStatus | statusFilter }}</span>
                <el-button type="warning" style="margin-left:20px;padding: 5px 20px;" @click="examineEditPage = true" v-show="businessInfo.accountStatus ==2">
                    重新提交审核
                </el-button>
            </el-row> -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-popover
                        placement="right"
                        trigger="click">
                        <img :src="businessInfo.businessLicense"
                             style="max-width:1000px;max-height: 90vh;border-radius:3px;">
                        <div slot="reference"
                             class="imgBox">
                            <img :src="businessInfo.businessLicense">
                            <p @click.stop>公司营业执照</p>
                        </div>
                    </el-popover>
                </el-col>
            </el-row>
        </div>

        <!-- 营业执照审核页面 -->
        <el-dialog
            title="上传营业执照"
            :visible.sync="examineEditPage"
            width="30%">
            <div>
                <el-upload
                    :action="uploadUrl"
                    :limit='1'
                    :on-change="(file)=> handleChange(index, file)"
                    list-type="picture-card"
                    :on-success="(response, file,fileList)=> handleSuccess(index, response, file,fileList)"
                    :on-remove="(file,fileList)=> handlePicRemove(index, file, fileList)"
                    :file-list="uploadData"
                ><i class="el-icon-plus"></i>
                </el-upload>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="examineEditPage = false">取 消</el-button>
                <el-button type="primary" @click="submitLicense">提 交</el-button>
            </span>
        </el-dialog>

        <h3 class="certificateTit"> 类目审核 </h3>
        <div class="tableBox">
            <el-table v-loading="loading"
                      :data="certificationInfoList"
                      :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                      border>
                <el-table-column label="id"
                                 prop="categoryid"
                                 align="center"
                                 width="150"></el-table-column>
                <el-table-column label="类目名称"
                                 prop="categoryname"
                                 align="center"></el-table-column>
                <el-table-column label="申请时间"
                                 prop="createtime"
                                 align="center">
                    <template slot-scope="scope">
                        {{scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column label="审核状态"
                                 prop="certificationstatus"
                                 align="center">
                    <template slot-scope="scope">
                        <span style="color:#4acf1e;" v-if="scope.row.certificationstatus ==1">已通过</span>
                        <span style="color:#dc0101;" v-else-if="scope.row.certificationstatus ==2">已驳回</span>
                        <span style="color:#ffa659;" v-else-if="scope.row.certificationstatus ==0">审核中</span>
                    </template>
                </el-table-column>
                <el-table-column label="查看详情"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="showEdit(scope.$index)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--查看类目详情-->
        <el-dialog
            v-if="certificationInfoList.length !=0"
            width="800px"
            :before-close="closeDialog"
            :visible.sync="showEditPage">
            <template slot="title">
                <span style="font-size:18px;color:#606266;margin: 20px 10px;">{{certificationInfoList[index].categoryname}}</span>
                <span style="margin-left:20px;color:#dc0101;" v-show="certificationInfoList[index].certificationstatus ==2">{{ certificationInfoList[index].certificationstatus | statusFilter }}</span>
                <span style="margin-left:20px;color:#4acf1e;" v-show="certificationInfoList[index].certificationstatus ==1">{{ certificationInfoList[index].certificationstatus | statusFilter }}</span>
                <span style="margin-left:20px;color:#ffa659;" v-show="certificationInfoList[index].certificationstatus ==0">{{ certificationInfoList[index].certificationstatus | statusFilter }}</span>
            </template>
            <el-row style="line-height: 44px;font-size:18px;"   v-show="certificationInfoList[index].certificationstatus ==2">
                <el-col :span="24">
                    <div class="infoList" style="color:#dc0101;">
                        <span>驳回原因：</span>
                        <span>{{certificationInfoList[index].rejectreason}}</span>
                    </div>
                </el-col>
            </el-row>
            <el-row v-for="(item,key) in certificationInfoList[index].certificationcontent" :key="key">
                <el-col :span="24">
                    <!-- <h4>{{item.name}}</h4> -->
                    <div v-for="(categoryList,i) in item.templateItemFormList" :key="i">
                        <el-popover v-if="categoryList.fieldtype == '图片'"
                                    placement="right"
                                    class="imgBox"
                                    trigger="click">
                            <img class="bigImg" :src="categoryList.fieldvalue"
                                 style="width:800px;max-width:800px;border-radius:3px;">
                            <div slot="reference" style="position: relative;">
                                <img style="border-radius:3px;" :src="categoryList.fieldvalue">
                                <p @click.stop>{{categoryList.fieldname}}</p>
                            </div>
                        </el-popover>
                        <div class="infoList" v-else>
                            <span >{{categoryList.fieldname}}:</span>{{categoryList.fieldvalue}}
                        </div>
                    </div>
                </el-col>
            </el-row>
            <span slot="footer"
                  class="dialog-footer">
                <router-link to="submitCertification">
                    <el-button type="warning" style="margin-right:20px;" v-show="certificationInfoList[index].certificationstatus ==2">
                        重新提交审核
                    </el-button>
                </router-link>
                <el-button @click="showEditPage = false">关闭</el-button>
            </span>
        </el-dialog>
        <!-- <el-row class="qualificationCertificate categoryBox">
            <el-col :span="7" :offset="index ? 1 : 0" v-for="(certificationInfo,index) in certificationInfoList" :key="index">
                <el-row style="line-height: 44px;font-size:18px;">
                    <el-col :span="24">
                        <span style="margin: 20px 10px;">{{certificationInfo.categoryname}}</span>
                        <span style="margin-left:20px;color:#dc0101;" v-show="certificationInfo.certificationstatus ==2">{{ certificationInfo.certificationstatus | statusFilter }}</span>
                        <span style="margin-left:20px;color:#4acf1e;" v-show="certificationInfo.certificationstatus ==1">{{ certificationInfo.certificationstatus | statusFilter }}</span>
                        <span style="margin-left:20px;color:#ffa659;" v-show="certificationInfo.certificationstatus ==0">{{ certificationInfo.certificationstatus | statusFilter }}</span>
                        <router-link to="submitCertification">
                            <el-button type="warning" plain size="mini" style="margin-left:20px;" v-show="certificationInfo.certificationstatus ==2">
                                重新提交审核
                            </el-button>
                        </router-link>
                    </el-col>
                </el-row>
                <el-row v-for="(item,key) in certificationInfo.certificationcontent" :key="key">
                    <el-col :span="24">
                        <div v-for="(categoryList,i) in item.templateItemFormList" :key="i">
                            <el-popover v-if="categoryList.fieldtype == '图片'"
                                        placement="right"
                                        trigger="click">
                                <img :src="categoryList.fieldvalue"
                                        style="max-width:1000px;max-height: 90vh;border-radius:3px;">
                                <div slot="reference"
                                        class="imgBox">
                                    <img :src="categoryList.fieldvalue">
                                    <p @click.stop>{{categoryList.fieldname}}</p>
                                </div>
                            </el-popover>
                            <div class="infoList" v-else>
                                <span >{{categoryList.fieldname}}:</span>{{categoryList.fieldvalue}}
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" >
                    <el-col :span="6">
                        法人：某某某
                    </el-col>
                </el-row>
                <el-row :gutter="20" >
                    <el-col :span="6">
                        法人：某某某
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-popover v-if="list[index].accountStatus"
                                    placement="right"
                                    trigger="click">
                        <img :src="list[index].businessLicense"
                                style="max-width:1000px;max-height: 90vh;border-radius:3px;">
                        <div slot="reference"
                                class="imgBox">
                            <img :src="list[index].businessLicense">
                            <p @click.stop>公司营业执照</p>
                        </div>
                        </el-popover>
                    </el-col>
                </el-row>
            </el-col>
            <el-row :gutter="20"  style="line-height: 44px;font-size:18px;">
                <span style="margin: 20px 10px;">类目1资质</span>
                <span style="margin-left:20px;color:#dc0101;" v-show="list[index].accountStatus ==1">{{ list[index].accountStatus | statusFilter }}</span>
                <span style="margin-left:20px;color:#4acf1e;" v-show="list[index].accountStatus ==2">{{ list[index].accountStatus | statusFilter }}</span>
                <span style="margin-left:20px;color:#ffa659;" v-show="list[index].accountStatus ==3">{{ list[index].accountStatus | statusFilter }}</span>
                <el-button type="warning" plain size="mini" style="margin-left:20px;" v-show="list[index].accountStatus ==1">重新提交审核</el-button>
            </el-row>
            <el-row :gutter="20" style="margin-bottom:40px;">
                <el-col :span="6">
                    <el-popover v-if="list[index].accountStatus"
                                placement="right"
                                trigger="click">
                    <img :src="list[index].businessLicense"
                            style="max-width:1000px;max-height: 90vh;border-radius:3px;">
                    <div slot="reference"
                            class="imgBox">
                        <img :src="list[index].businessLicense">
                        <p @click.stop>公司营业执照</p>
                    </div>
                    </el-popover>
                </el-col>
            </el-row>
        </el-row> -->
    </div>
</template>

<script>
    import {
        getCertificationInfoList,
        getCheckEntityUser,
        resubmitLicense
    } from "../../api/myBusiness/myCertification.js";
    import { BASE_URL } from "../../config/app";
    export default {
        data() {
            return {
                loading: false,
                index: 0,
                list: [
                    {
                        registrationNumber: "XDKKLJLKA7LKJK73498H",
                        userMobile: "18888888888",
                        userRegistTime: "2020/09/01",
                        accountStatus: 3,
                        businessLicense:
                            "https://up.enterdesk.com/edpic/89/97/08/8997088bb8259681bae09bdf502b9c70.jpg"
                    }
                ],
                certificationInfoList: [
                    // {
                    //     certificationcontent: null,
                    //     certificationstatus: null,
                    //     categoryname: null,
                    //     rejectreason: null,
                    //     certificationcontent: null
                    // }
                ],
                businessInfo: {},
                showEditPage: false,
                examineEditPage: false,
                uploadUrl:  BASE_URL + "/goldendays-currency/tool/uploadpro",//上传图片
                uploadData: [], //[{name:"12",url:"http://localhost/maotianxiaupload/common/2019-08-23/MH1566545692219_mid.jpg"}], // 图片data
                licenseUrl: ""
            };
        },
        methods: {
            showEdit(index) {
                this.index = index;
                console.log(this.certificationInfoList[index]);
                this.showEditPage = true;
            },
            closeDialog() {
                this.showEditPage = false;
            },
            // 图片上传
            handleChange(index, file) {
                console.log(index, file);
                // this.fileName =
                //     this.submitJson.templateFromList[index].templateItemFormList[
                //         key
                //     ].fieldname || "";
                return false;
            },
            //图片上传成功
            handleSuccess(index, response, file) {
                console.log(response.data, file);
                if (response.status === 1) {
                    // const filePath = response.data;
                    this.licenseUrl = response.data;
                    return;
                }
                this.$message.error("上传文件报错");
            },
            // 移除图片
            handlePicRemove(index, file, fileList) {
                console.log(index, file, fileList);
                // this.submitJson.templateFromList[index].templateItemFormList[
                //     key
                // ].fieldvalue = null;
                this.licenseUrl = null;
            },
            // 提交资质
            submitLicense() {
                if (!this.licenseUrl) {
                    this.$message.warning("请上传营业执照图片！");
                    return false;
                }
                let data = {
                    accountStatus: 0,
                    businesslicense: this.licenseUrl
                };
                resubmitLicense(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.examineEditPage = false;
                            return false;
                        }
                        console.log(response);
                        this.$message.success("提交成功!");
                        this.businessInfo.accountStatus = 0;
                        this.businessInfo.businessLicense = this.licenseUrl;
                        this.licenseUrl = null;
                        this.examineEditPage = false;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(err => {
                        this.$message.error(err);
                        console.log(err);
                        this.loading = false;
                        this.examineEditPage = false;
                    });
            }
        },
        filters: {
            statusFilter(status) {
                let statusFilter = "";
                switch (status) {
                    case 2:
                        statusFilter = "已驳回";
                        break;
                    case 1:
                        statusFilter = "已通过";
                        break;
                    case 0:
                        statusFilter = "审核中";
                        break;
                    default:
                        statusFilter = "审核中";
                        break;
                }
                return statusFilter;
            }
        },
        created() {
            this.loading = true;
            getCertificationInfoList()
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    console.log(response);
                    if(response.data.length == 0){
                        return false
                    }
                    this.certificationInfoList = response.data || [];
                    console.log(this.certificationInfoList);
                    this.certificationInfoList.forEach((val, key) => {
                        this.certificationInfoList[
                            key
                            ].certificationcontent = JSON.parse(
                            val.certificationcontent
                        );
                    });
                    console.log(this.certificationInfoList);
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
            getCheckEntityUser()
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    this.businessInfo = response.data.list[0] || {};
                    this.setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        }
    };
</script>

<style scoped lang="scss">
    .qualificationCertificate .el-col div .el-select {
        min-height: auto !important;
    }
    .certificateTit {
        font-size: 20px;
        font-weight: 400;
        margin: 20px 0;
        color: #000;
    }
    .categoryBox > div {
        width: 32%;
        margin-bottom: 40px;
        box-sizing: border-box;
        // padding: 20px;
        // background-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        .el-row {
            padding: 0 20px;
        }
        .el-row:first-child {
            padding: 10px 20px;
            border-bottom: 2px solid #f4f4f4;
        }
    }
    .qualificationCertificate {
        padding: 20px 0;
        border-top: 2px solid #8c8c8c;
        // border-bottom: 2px solid #8c8c8c;
        color: #606266 !important;
        h4 {
            font-size: 18px;
            font-weight: 400;
            color: #000;
            line-height: 36px;
        }
        img {
            display: block;
            margin: 10px auto;
        }
        p {
            text-align: center;
        }
        .bottomList {
            padding: 20px;
            li {
                line-height: 40px;
            }
        }
    }

    .infoList {
        padding: 15px 0;
        font-size: 16px;
        // border-bottom: 1px solid #8c8c8c;
    }
    .imgBox {
        width: 300px;
        overflow: hidden;
        // height: 150px;
        border-radius: 5px;
        margin: 10px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        position: relative;
        cursor: pointer;
        p {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            text-shadow: -1px 1px 1px rgba(255, 255, 255, 0.5);
            color: #fff;
            padding: 6px 0;
            text-align: center;
        }
        img {
            height: auto;
            width: 300px;
            border-radius: 5px;
            margin: auto;
            display: block;
        }

        img.bigImg {
            // width: auto;
            width: 1000px;
        }
    }
    .tableBox {
        border-top: 2px solid #8c8c8c;
        padding-top: 20px;
    }
    .el-dialog > .el-dialog__body {
        padding: 0 20px !important;
    }
    .el-dialog > .el-dialog__header {
        border-bottom: 2px solid #8c8c8c !important;
    }
    .el-dialog > .el-dialog__footer {
        border-top: 2px solid #8c8c8c !important;
    }
</style>
